<template>
  <div class="app-container">
    <h1>App2 组件</h1>
    <!-- <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a> -->

    <!-- 注意1：在hash地址中/后面的参数叫做路径参数 -->
    <!-- 路由参数对象中$route需要使用this.$route.params访问路径参数 -->

    <!-- 注意2.在hash地址中，？后的参数项叫做查询参数 -->
    <!-- 在路由的参数对象中，需要使用this.$route.query来访问查询参数 -->

    <!-- 注意3：在this.$route.path只是路径部分，fullpath是完整的地址 -->
    
    <router-link to="/home">首页</router-link>
    <router-link to="/movie/1">电影1</router-link>
    <router-link to="/movie/2?name=zhangsan&sex=man">电影2</router-link>
    <router-link to="/movie/3">电影3</router-link>
    <router-link to="/movie/4">电影4</router-link>
    <router-link to="/about">关于</router-link>
    

    <hr />
    <!-- vue-router的配套使用标签 占位符  router-view-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>
